<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title" back-url="index/order"></my-navbar>
		<view v-if="!sensitive">
			<view class="tips-text" :class="tips_class" v-if="error_tips!=''">
				{{error_tips}}
			</view>
			<view class="cardno-upload">
				<block v-if="isFaceCamera">
					<faceCamera @submit="wxCamerFace" @close="closeCamera" @retake="retakePhoto"></faceCamera>
				</block>
				<block v-else>
					<image class="cardno-upload-base64" style="width: 100%;" mode="widthFix" :src="id_front_avatar"></image>
				</block>
			</view>
			<view class="camera-but">
				<!-- #ifdef MP-WEIXIN -->
				<button class="my-but-primary" @click="wxFace()" v-if="!isCameraShow">开始人脸识别</button>
				<block v-else>
					<button class="my-but-primary" @click="openFaceCamera" v-if="!isFaceCamera">开始人脸核验</button>
				</block>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<button class="my-but-primary" @click="alipayFace()">开始人脸识别</button>
				<!-- #endif -->
			</view>
		</view>
		<view class="sensitive-box" v-if="sensitive">
			<u-empty mode="data" textSize="16" text="请下单后 , 前往线下门店进行人脸核实 , 方可进行下一步操作" icon="/static/images/empty/list.png"></u-empty>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import $url from '@/common/url'
	import checkLogin from '@/mixins/loginCheck.js'
	import Encyption from '@/common/encryption.js'
	import faceCamera from '../components/faceCamera.vue';
	export default {
		mixins:[checkLogin],
		components: {
		    faceCamera
		},
		data() {
			return {
				nav_title:'信息核实',
				sensitive:true,
				isCameraShow:true,		//是否显示拍照人脸检测
				isFaceCamera:false,		//是否开始人脸识别
				id_front_avatar:"",
				order_id:0,
				error_tips:"",
				tips_class:"",
			}
		},
		onLoad(option){
			if(option.id){
				this.order_id=option.id
				
				this.$u.api.getConfig().then(res=>{
					this.id_front_avatar=res.data.design.id_front_avatar
					this.sensitive=res.data.base.is_app_audit===1?true:false
				})
			}else{
				this.$c.error('缺少参数','index/index')
			}
		},
		onShow(){
			//#ifdef MP-WEIXIN
			this.backwxFace()
			//#endif
			
			//判断订单是否待付款
			this.isOrderVerifyOk()
			
			this.initData()
		},
		computed:{
			...mapState({
				gain_info:state => state.$gainInfo,
				back_info:state => state.$backInfo,
				start_date:state => state.$startDate,
				end_date:state => state.$endDate,
				carid:state => state.$carID,
			}),
		},
		components: {
		},
		methods: {
			initData(){

			},
			
			//判断订单是否待付款
			isOrderVerifyOk(){
				let than=this
				this.$u.api.orderInfo({order_id:this.order_id}).then(res=>{
					if(res.data.order.order_status===8){
						than.$c.info('订单已处理！','flow/pay/index?id='+this.order_id)
					}
				})
			},
			
			//#ifdef MP-WEIXIN
			//判断是否人脸小程序跳转回来的
			backwxFace(){
				let than=this
				let post={order_id:this.order_id}
				let faceResult = getApp().globalData.faceResult

				if(faceResult!==""){
					let res=JSON.parse(faceResult.data)
					let extendData=JSON.parse(faceResult.extendData)		//附加数据
					//清空全局缓存
					getApp().globalData.faceResult=''
					console.log(extendData)
					if(res.success===true && res.data.code==="200"){
						uni.$u.api.wxFaceVerify(post).then(ok_res=>{
							than.verify_ok(ok_res)
						})
					}else{
						than.verify_error(0,res.data.msg)
					}
				}
			},
			
			//微信检测人脸
			wxFace(){
				let than=this
				let post={order_id:this.order_id}
				//清空提示样式
				this.cls_tips()
				
				this.$u.api.faceConfing(post).then(d=>{
					let uuid=this.$u.guid()
					let data=d.data
					let extraJson={
						token: data.token,
						platformNo: data.platformNo,
						orderNo: data.orderNo,
						extraInfo: {
							idName: data.id_name,
							idNumber:  data.id_code,
							isShowCamera: true,
						},
						//附带数据，回传
						extendData:{}
					}
					let encExtraJson = Encyption.aseEncryptParams(JSON.stringify(extraJson),uuid)
					
					uni.openEmbeddedMiniProgram({
						appId : "wxe83fe5a4f77efb58",
						envVersion: "release",
						path : "pages/source/index?id="+uuid,
						extraData : {
							params : encExtraJson
						}
					})
				})
			},
			// 拍照人脸识别
			wxCamerFace(img){				
				let than=this;
				uni.showLoading({
					title: '正在上传中...'
				});

				this.$u.api.faceCameraVerify({order_id: this.order_id,face_img:img}).then(res => {
					than.verify_ok(res)
				}).catch(err => {
					than.verify_error(err.code,err.msg)
				}).finally(() => {
					uni.hideLoading();
				});
			},
			// 开始人脸识别-拍照款
			openFaceCamera(){
				this.isFaceCamera=true;
			},
			// 关闭摄像头
			closeCamera(){
				this.isFaceCamera=false;
				this.cls_tips()
			},
			// 重新拍照
			retakePhoto(){
				this.cls_tips()
			},
			//#endif
			
			//支付宝检测人脸
			//#ifdef MP-ALIPAY
			alipayFace(){
				let than=this
				let post={order_id:this.order_id}
				uni.$u.api.alipayFace(post).then(conf=>{
					my.startAPVerify({
						url: conf.data.face_url,
						certifyId: conf.data.certify_id,
						success: function (res) {
							uni.$u.api.aliFaceVerify(post).then(ok_res=>{
								than.verify_ok(ok_res)
							})
						},
						fail: function (res) {
							than.verify_error(res.resultStatus,res.result.errorCode)
						},
						complete: function (res) {
							// than.verify_error(res.resultStatus,res.result.errorCode)
							console.log('complete', res)
						}
					})
				})
			},
			//#endif
			
			//认证成功处理
			verify_ok(res2){
				if(res2.status){
					this.tips_class="success"
					this.error_tips="检验成功！"
					setTimeout(res=>{
						this.$c.success('检验成功！','flow/'+res2.data.url+'/index?id='+this.order_id)
					},500)
				}
			},
			//认证失败处理
			verify_error(code,msg){
				let than=this
				if(code==="4000"){
					switch(msg){
						case "NAME_NOT_MATCH_CERT_NO":
							msg="身份信息与支付宝认证信息不匹配"
							break
						case "USER_IS_NOT_CERTIFY":
							msg="用户未认证"
							break;
						default:
							msg="认证不通过"
					}
				}else if(code==="6001"){
					msg="您取消了认证"
				}
				this.tips_class="error"
				this.error_tips=msg
				setTimeout(res=>{
					than.$c.error(msg)
				},500)
			},
			//清空提示样式
			cls_tips(){
				this.tips_class=""
				this.error_tips=""
			}
		}
		
	}
</script>

<style lang="scss">
	page{
		background-color:#FFFFFF;
	}
	.camera-title{
		font-size: 32rpx;
		margin-top: 50rpx;
		text-align: center;
	}
	.camera-box{
		display: flex;
		flex-direction:column;
		align-items: center;
		justify-content: center;
		margin: 80rpx auto;
	}
	.camera-but{
		display: flex;
		justify-content: space-around;;
		flex-direction:row ;
		margin: 0rpx auto;
		padding: 0rpx 60rpx;
	}
	.camera-but view{
		width: 80%;
	}
	
	.cardno-upload {
	    display: -ms-flexbox;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
		padding: 15rpx;
		margin: 40rpx auto;
	    border-radius: 10rpx;
	}
	
	.page-idcard .cardno-upload-base64 {
	    object-fit: contain;
	}
	.tips-text{
		font-size: 28rpx;
		color: #FFFFFF;
		width: 100%;
		text-align: center;
		margin-top: 0rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
	}
	
	.error{
		background-color: $u-error;
	}
	.success{
		background-color: $u-success;
	}
	.sensitive-box{
		margin: 30rpx;
	}
</style>
